<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Team Table</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" type='text/css'>
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<article class="table-widget">
		<div class="caption">
			<h2>Team Members</h2>
			<button class="export-btn" type="button">
				<!-- svg icon--> Export
			</button>
		</div>
		<table>
			<thead>
				<tr>
					<th>Name</th>
					<!-- more columns-->
				</tr>
			</thead>
			<tbody id="team-member-rows">
				<tr>
					<td class="team-member-profile">
						<img src="assets/drew.jpg" alt="Drew Cano">
						<div class="profile-info">
							<div class="profile-info__name">Drew Cano
							</div>
							<div class=profile-info__alias>drew</div>
						</div>
					</td>
					<td>
						<div class="status">
							<div class="status__circle status--active"></div>
							active
						</div>
					</td>
					<td>drew.crano@example.com</td>
					<td>
						<div class="tags">
							<div class="tag tag--marketing">Marketing</div>
						</div>
					</td>
				</tr>
				<!-- more rows-->
			</tbody>
		</table>
	</article>
	<script src="script.js"></script>
</body>

</html>